<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid white;
        }
        .happy{
            border: 5px;
            background-color: red;
        }
        .sad{
            border: 5px;
            background-color: black;
        }
        .normal{
            border: 5px;
            background-color: hsl(141, 78%, 22%);
        }
        .jj1{
            border: 30px solid yellow;
        }
        .jj2{
            border: 30px solid blue;
        }
        .jj3{
            border: 30px solid rosybrown;
        }
    </style>
</head>
<!-- 绑定样式:
1。class样式
写法:class="xxx”xxx可以是字符串、对象、数组
字符串写法适用于:类名不确定，要动态获取。
对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用.
2。style样式
:style="{fontsize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象 -->

<body>
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于: 样式的类名不确定，需要动态指定 -->
        <div class="basic":class="mood" @click="changeMood">{{name}}</div><br/><br/>
        <!-- 绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定   移除或添加-->
        <div class="basic":class="classArr" @click="changeMood">{{name}}</div><br/><br/>
        <!--绑定班级样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>

        <!-- 对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>

        <!-- 数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div> <br/><br/>

     </div>
</body>

<script type="text/javascript">
   Vue.config.productionTip=false;
 
    let vm =new Vue({
        el:"#root",
        data:{
            name:'俊杰1',
            mood: 'normal',
            classArr:['jj1','jj2','jj3'],
            classObj:{
                jj1:true,
                jj2:false,
                jj3:false
            },
            styleObj:{
                fontSize: '50px',
                backgroundColor: 'red',
                border:'10px'
            },
            styleArr:[{
                fontSize: '50px'
            },{
                backgroundColor: 'yellow'
            }]
        },
        methods: {
            changeMood(){
            }
        },
    })
</script>
</html>